<template>
  <div class="main" v-tap="tapFn">
    <div class="slide" v-bind:class="{testClass:'bbb'=='bbb','testClass2':classTest}" v-bind:data-src="'myDate'">
      <div v-for="(item,index) in combineData.data"
           v-bind:class="{active:slideActive==index}"
           @click="slideActiveTran(index)"
           v-bind:id="item.class.id"
           v-lazyload="'haha'">
        <span>{{item.class.name}}</span>
      </div>
    </div>
    <div class="content">
      <div id="wrapper">
      <div v-for="(item,index) in combineData.data">
        <div class="title"
             v-bind:id="'title-'+index">{{item.class.name}}</div>
        <div class="list"
             v-for="(list,index) in item.list"
             @click="showProduct(list,index)">
          <div class="imgDiv">
            <img @click="test()"
                 src=""
                 alt=""
                 v-bind:src="list.image">
          </div>
          <div class="listDiv">
            <p>
              {{list.name}}
            </p>
            <p>
              <span>月售{{list.monthSale}}</span>
              <span>赞{{list.fabulous}}</span>
            </p>
            <p>
              <span>¥{{list.price}}</span>
              <span v-on:click.stop="addOne(list)"
                    class="flright addOneBtn">+</span>
              <transition name="fold">
                <span v-show="list.buyNum!=0"
                      class="flright bynNumSPAN">{{list.buyNum}}</span>
              </transition>
              <transition name="fold">
                <span v-show="list.buyNum!=0"
                      v-on:click.stop="reduce(list)"
                      class="flright reduceBtn">-</span>
              </transition>
            </p>
          </div>
        </div>
      </div>
      </div>
    </div>
    <div class="bottom">
      <div class="bottomDetails"
           v-if="bottomDetailShow">
        <div v-for="item in combineData.data">
          <div class="bottomDetailsList"
               v-if="list.buyNum!=0"
               v-for="list in item.list">
            <span class="flleft">{{list.name}}</span>
            <span v-on:click="addOne(list)"
                  class="flright addOneBtn">+</span>
            <span class="flright bynNumSPAN">{{list.buyNum}}</span>
            <span v-show="list.buyNum!=0"
                  v-on:click="reduce(list)"
                  class="flright reduceBtn">-</span>
            <span class="flright bottomDetailsListSum">¥{{list.price*list.buyNum}}</span>
          </div>
        </div>
      </div>
      <div class="bottomNav"
           @click="changeBottomStatus()">
        <div class="buyNumSum">{{getbuyNumSum}}</div>
        <div class="SumMoney">¥{{bottomData.SumMoney}}</div>
        <div class="sendMoney">另需配送费{{bottomData.sendMoney}}¥</div>
        <div @click.stop="go('#/settlement')"
             class="lowSend">{{getlowSend}}</div>
      </div>
    </div>
  </div>
</template>
<script>
import router from '../../../router'
import Vue from 'vue'
// import MintUI from 'mint-ui'
import { Toast } from 'mint-ui';
import BScroll from 'better-scroll';
//Vue.use(MintUI);
export default {
  name: "buy",
  components: {},
  data() {
    return {
      shoppingList: {},
      obj: {},
      shoppingCarList: {},
      combineData: {},
      bottomData: {
        buyNumSum: 0,
        SumMoney: 0,
        sendMoney: 10,
        lowSend: 400
      },
      bottomDetailShow: false,
      slideActive: 0,
      myScroll:{},
      tapFn:null,
      classTest:false
    }
  },
  //计算属性(方便模板的清晰)
  computed: {
    getbuyNumSum: function () {
      return this.bottomData.buyNumSum <= 0 ? "没点噢" : this.bottomData.buyNumSum;
    },
    getlowSend: function () {
      return this.bottomData.lowSend <= 0 ? "去结算" : "差" + this.bottomData.lowSend + "元起送";
    }
  },
  beforeCreate() {
    console.log(Vue);
    var that = this;
    this.$http.get('./static/data/shoppingData/shoppingList.json').then(function (response) {
      that.shoppingList = response.body;
      that.$http.get('./static/data/shoppingData/shoppingCarData.json').then(function (
        response) {
        that.shoppingCarList = response.body;
        for (let i = 0; i < that.shoppingList.data.length; i++) {
          let item = that.shoppingList.data[i];
          for (let j = 0; j < item.list.length; j++) {
            let list = item.list[j];
            list.buyNum = 0;
            for (let k = 0; k < that.shoppingCarList.data.length; k++) {
              let carList = that.shoppingCarList.data[k];
              if (list.id == carList.id) {
                list.buyNum = carList.buyNum;
                that.bottomData.buyNumSum += parseInt(list.buyNum);
                var sum = parseInt(list.buyNum) * parseInt(list.price);
                that.bottomData.SumMoney += sum;
              }
            }
          }
        }
        //that.combineData = JSON.parse(JSON.stringify(that.shoppingList));
        that.combineData = Object.assign({},that.shoppingList);
        that.bottomData.lowSend = that.bottomData.lowSend - that.bottomData.SumMoney;
      });
    }, function () { alert("请求失败") });
  },
  created:function(){
  	//这个函数不能写在methods里面，不然传不到指令里面去
  	//左右滑动
  	this.tapFn = {
  		leftFn:function(){
  			router.replace("/shopping/saler");
  		},
  		rightFn:function(){
  		}
  	}
    //测试自定义属性
    //this.myDate = "20012"+"-"+"80890";
  },
  mounted(){
      var fn = v => {
        alert(v);
      }
    console.log(BScroll);
    var that = this;
    setTimeout(function(){
        that.myScroll = new BScroll(document.querySelector('.content'),{
            startX: 0,
            startY: 0
        })
     },500);
  },
  props: ["jrollRefresh","getBottomShow"],
  watch: {
    getBottomShow: function (val, oldVal) {
      this.bottomDetailShow = false;
    },
    jrollRefresh:function(){
    	var that = this;
    	//加延迟防止刷新的时候卡顿
    	setTimeout(function(){
    		that.myScroll.refresh();
    	},800)
    }
  },
  methods: {
    init() { 
    },
    addOne(list) {
      var buyNum = parseInt(list.buyNum);
      buyNum++;
      list.buyNum = buyNum;
      this.bottomData.buyNumSum++;
      this.bottomData.SumMoney += parseInt(list.price);
      this.bottomData.lowSend = this.bottomData.lowSend - parseInt(list.price);
    },
    reduce(list) {
      var buyNum = parseInt(list.buyNum);
      if (buyNum == 0) {
        return
      } else {
        buyNum--;
        list.buyNum = buyNum;
        this.bottomData.buyNumSum--;
        this.bottomData.SumMoney -= parseInt(list.price);
        this.bottomData.lowSend = this.bottomData.lowSend + parseInt(list.price);
      }
    },
    changeBottomStatus() {
      this.bottomDetailShow = this.bottomData.buyNumSum <= 0 ? this.bottomDetailShow : !this.bottomDetailShow;
      this.$emit('changeBottomStatus', this.bottomDetailShow);
    },
    go(url="") {
      if (url == "#/settlement" && this.bottomData.lowSend <= 0) {
        window.location.href = url;
      }
    },
    test() {
      Toast('提示信息');
      //测试vuex
      if(this.$store.state.user_name == ""){
        this.$store.state.user_name = "i am a username";
      }else{
        this.$store.state.user_name = "";
      }
    },
    showProduct(list, index) {
      //删除list
      //item.list.splice(index,1);
      this.$store.dispatch('changeProducStateActions',list);
    },
    slideActiveTran(index) {
      this.slideActive = index;
      var selector = "#title-" + index;
      var anchor = this.$el.querySelector(selector);
      var content = this.$el.querySelector('.content');
      //content.scrollTop = anchor.offsetTop;
      this.myScroll.scrollToElement(anchor)
    }
  }
}

</script>
<style lang="scss" scoped>
.main {
  width: 100%;
  overflow: auto;
  position: absolute;
  /*top: 137px;*/
  bottom: 0px;
  background: #F2F2F2;
  .slide {
    width: 30%;
    float: left;
    >div {
      border-left: 2px solid #F2F2F2;
      height: 40px;
      line-height: 40px;
    }
    .active {
      border-left: 2px solid orange;
      background: #F2F2F2;
      background: white;
    }
  }
  .content {
    width: 70%;
    float: right;
    position: absolute;
    top: 0px;
    bottom: 50px;
    left: 112px;
    overflow: scroll;
    .list {
      background: white;
      padding: 5px;
      box-sizing: border-box;
      .imgDiv {
        width: 50px;
        height: 50px;
        float: left;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .listDiv{
        padding-left: 50px;
        box-sizing: border-box;
        text-align: left;
        p{
          padding: 5px;
          box-sizing: border-box;
        }
      }
    }
    .title{
      width: 100%;
      text-align: left;
      padding: 5px;
      box-sizing: border-box;
      background: #F2F2F2;
    }
  }
  .bottom{
    position: fixed;
    bottom: 0px;
    left: 0px;
    background: white;
    height: 50px;
    width: 100%;
    border-top: 1px solid lightgray;
    z-index: 15;
    .bottomNav{
      height: 100%;
      overflow: auto;
    }
  }
}

.main .bottom .bottomNav {
  height: 100%;
  overflow: auto;
}

.main .bottom .buyNumSum {
  width: 16%;
  height: 50px;
  float: left;
  line-height: 50px;
}

.main .bottom .SumMoney {
  width: 16%;
  height: 50px;
  float: left;
  line-height: 50px;
}

.main .bottom .sendMoney {
  width: 40%;
  height: 50px;
  float: left;
  line-height: 50px;
}

.main .bottom .lowSend {
  width: 28%;
  height: 50px;
  float: right;
  line-height: 50px;
}

.main .addOneBtn {
  margin-right: 10px;
  background: #FFA501;
  width: 25px;
  height: 25px;
  line-height: 25px;
  text-align: center;
  border-radius: 50%;
}

.main .bynNumSPAN {
  margin-right: 10px;
  font-size: 18px;
}

.main .reduceBtn {
  margin-right: 10px;
  background: lightgray;
  width: 25px;
  height: 25px;
  line-height: 25px;
  text-align: center;
  border-radius: 50%;
}

.main .reduceBt .v-enter,
.main .reduceBt .v-leave {
  height: 0;
  padding: 0 10px;
  opacity: 0;
}

.main .bottomDetails {
  width: 100%;
  position: absolute;
  bottom: 50px;
  background: white;
  border-bottom: 1px solid lightgray;
  border-top: 1px solid lightgray;
}

.main .bottomDetails .bottomDetailsList {
  padding: 15px;
  box-sizing: border-box;
  overflow: auto;
}

.main .bottomDetails .bottomDetailsList .bottomDetailsListSum {
  margin-right: 15px;
}

.main .fold-enter-active {
  animation-name: fold-in;
  animation-duration: .5s;
}

.main .fold-leave-active {
  animation-name: fold-out;
  animation-duration: .5s;
}

@keyframes fold-in {
  0% {
    // transform: translateX(20px);
    opacity: 0;
    transform: scale(0);
  }
  50% {
    opacity: 0.5;
     transform: scale(1.5);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes fold-out {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.5;
    transform: scale(1.5);
  }
  100% {
    // transform: translateX(20px);
    opacity: 0;
    transform: scale(0);
  }
}
</style>
